<template>
  <div class="goods">
    <!-- 1、目录位置 面包屑 -->
      <ElementUIBreadcrumb/>
    <!-- --1.搜索区域 -->
    <div class="header">
      <!-- 仅在输入框失去焦点或用户按下回车时触发 -->
      <el-input
        @change="searchInp"
        v-model="input"
        placeholder="请输入商品名称"
      ></el-input>
      <el-button type="primary">查询</el-button>
      <!-- <el-button type="primary"><router-link to='/add-goods' style="color:#fff">页面添加</router-link></el-button> -->
      <el-button type="primary" @click="addGoods">弹窗添加</el-button>
    </div>
    <!-- --2.表格展示区域 -->
    <div class="wrapper">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column prop="cid" label="商品ID" width="70px"></el-table-column>
        <el-table-column
          prop="title"
          label="商品名称"
          width="90"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="price"
          label="商品价格"
          width="80"    
        ></el-table-column>
        <el-table-column prop="num" label="商品数量" width="80"></el-table-column>
        <el-table-column
          prop="category"
          label="规格类目"
          width="90"
        ></el-table-column>
        <el-table-column
          prop="image"
          label="商品图片"
          show-overflow-tooltip
          width="100"
        ></el-table-column>
        <el-table-column
          prop="sellPoint"
          label="商品卖点"
          width=""
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="descs"
          label="商品描述"
          width=""
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <!-- scope.$index, scope.row 当前下表和行的数据   -->
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- --3.分页 -->
    <Mypag
      :total="total"
      :pageSize="pageSize"
      :currentPage="currentPage"
      @handleCurrentChange="handleCurrentChange"
    ></Mypag>
    <!-- --4.显示弹窗组件 :dialogVisible='dialogVisible' 1、父传子 2、children 3、ref-->
    <GoodsDialog ref="dialog" :title="title" :rowData="rowData"></GoodsDialog>
  </div>
</template>

<script>
import GoodsDialog from "../Goods/GoodsDialog.vue";
import Mypag from "@/components/MypaginationIndex.vue";
import ElementUIBreadcrumb from "@/components/ElementUIBreadcrumb.vue"

export default {
  components: { Mypag, GoodsDialog,ElementUIBreadcrumb },
  data() {
    return {
      input: "",
      tableData: [],
      total: 10,
      pageSize: 1,
      type: 1,
      list: [],
      currentPage: 1, //选中的页码
      title: "添加商品",
      rowData: {}, //当前行的对象
    };
  },
  methods: {
    //添加商品--出现得弹窗
    addGoods() {
      // 修改子组件实例数据
      console.log("------弹框");
      this.$refs.dialog.dialogVisible = true;
      this.title = "添加商品";
    },
    // 分页页码
    handleCurrentChange(num) {
      // 小错误分页高亮同步
      this.currentPage = num;
      if (this.type === 1) {
        this.http(num); // 商品分页
      } else {
        // 搜索分页 1 2 3 4 list=[0,1,2,3,4,5,6,7,8] 0-3 3-6 6-9 9-12
        console.log("--搜索的分页处理--");
        //(num-3) * 3 num*3
        this.tableData = this.list.slice((num - 1) * 3, num * 3);
      }
    },
    // 搜索查询数据
    // 定义搜索查询数据的方法，接收一个参数 val 作为搜索关键词
    searchInp(val) {
      // 判断如果取反则返回最初的数据
      if (!val) {
        this.http(1);
        return;
      }
      // 调用 $api 对象的 getSearch 方法发起搜索请求，传递一个包含 search 字段的对象，其值为搜索关键词 val
      // 打印搜索结果数据，方便调试查看
      this.$api.getSearch({ search: val }).then((res) => {
        console.log("--搜索--", res.data);
        // 分页的值初始话回来为一，04商品-分页功能
        this.currentPage = 1;
        // 判断响应数据中的 status 字段是否等于 200，表示搜索成功
        if (res.data.status === 200) {
          // 如果搜索成功，将响应数据中的 result 字段赋值给 tableData，用于更新表格数据 这是获取后端的token值
          this.list = res.data.result; // 获取的搜索的总条数--数据分割
          // 假设没有分页 我们处理分页
          this.total = res.data.result.length;
          this.pageSize = 3;
          this.tableData = res.data.result.slice(0, 3);
          this.type = 2;
        } else {
          // 如果搜索失败，将 tableData 置为空数组，清空表格数据
          this.tableData = [];
          this.total = 1;
          this.pageSize = 1;
          this.type = 1;
        }
      });
    },
    // 编辑操作
    handleEdit(index, row) {
      //row={}是对象
      //1、点击编辑按钮 显示弹框  2、弹框回显示数据展示-当前的行数据
      this.$refs.dialog.dialogVisible = true;
      this.title = "编辑商品";
      this.rowData = { ...row }; //每次都是新地址/监听数据才会发生变化 赋值新的地址
      //编辑 按钮获取数据
      // this.$refs.dialog.goodsForm = row;//方法1
    },
    // 删除操作
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //请求后台接口
          this.$api.getdeleteGoods({ id: row.id }).then((res) => {
            console.log("删除", res.data);
            if (res.data.status === 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              //视图更新
              this.http(1);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 分页操作

    // 封装起来的了 商品列表的获取  分页
    http(page) {
      // 第一次进
      this.$api.getGoodsList({ page }).then((res) => {
        console.log("--------商品列表的列表信息", res.data);
        if (res.data.status === 200) {
          this.tableData = res.data.data; // 数据列表
          this.total = res.data.total;
          this.pageSize = res.data.pageSize;
        }
      });
    },
  },
  // 生命周期函数
  created() {
    this.http(1);
  },
};
</script>

<style lang="less" scoped>
.goods {
  margin: 20px;
}
.header {
  display: flex;
  button {
    margin-left: 20px;
  }
}

.wrapper {
  margin: 30px 0;
}
</style>